<template>
	<text :style="{ fontSize: `${sizeUnit}` }" :class="className" @click="$emit('click')">
		<slot></slot>
	</text>
</template>

<script>
	import Config from '../config.js'
	export default {
		props: {
			theme: {
				type: Boolean,
				default() {
					return false
				}
			}, // 主颜色
			cls: {
				type: Array,
				default () {
					return []
				}
			},
			size: {
				type: String | Number,
				default() {
					return ''
				}
			}
		},
		data() {
			return {
				classData: []
			}
		},
		created() {
			this.classData = this.cls
		},
		computed: {
			sizeUnit() {
				return typeof this.size === 'number' ? `${this.size * 2}rpx` : (typeof this.size === 'string' ? this.size : '')
			},
			className() {
				if (this.theme) {
					this.classData = this.cls.concat(['theme'])
				}
				return this.classData.map(c => Config.classSimple[c] ? Config.classSimple[c] : c)
			}
		}
	}
</script>

<style lang="scss">
	.theme {
		color: $uni-color-primary !important;
	}
</style>
